<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id='app'>
        <cmt-box @func="loadComments"></cmt-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人: {{item.user}}</span>
                {{item.content}}
            </li>
        </ul>

    </div>

    <template id="tmpl">
        <div>
            <div>
                <div class="form-group">
                    <label>评论人:</label>
                    <input type="text" class="form-control" v-model="user">
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label>评论内容:</label>
                    <textarea class="form-control" v-model="content"></textarea>
                </div>
            </div>

            <div class="form-group">
                <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
            </div>
        </div>
    </template>

    <script>

        var commentBox = {
            data(){
                return {
                    user:'',
                    content : ''
                }
            },
            template : "#tmpl",
            methods :{
                postComment(){ // 发表评论的方法
                    // 分析发表评论的业务逻辑
                    // 1、评论数据存储到 localStorage 中
                    // 2、先组织出一个最新的评论数据对象
                    // 3、把第二步得到的评论对象保存到 localStorage 中， localStorage只支持存放字符串数据
                    // 在保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数据，转换为一个数组对象，然后把最新的评论 push到这个数组中
                    // 如果获取到的 localStorage 中的评论字符串不存在，则可以返回一个 '[]', 让 JSON.parse 去转换
                    // 把最新的评论列表数组，再次调用 JSON.stringfy转为数组字符串。 然后调用 localStorage.setItem()
                    var comment = {id: Date.now(), user:this.user, content: this.content}
                    // 从 localStorage 中获取所有评论
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    list.unshift(comment)
                    // 重新保存最新的频评论数据
                    localStorage.setItem('cmts', JSON.stringify(list))
                    this.user = this.content = ''
                    this.$emit("func")
                }
            }
        }    


        var vm = new Vue({
            el : "#app",
            data : {
                list : [
                    {id:Date.now(), user : "李白", content:"天生我材必有用"},
                    {id:Date.now(), user : "江小白", content:"劝君更进一杯酒"},
                    {id:Date.now(), user : "小马", content:"千里马"}
                ]
            },
            created(){
                this.loadComments()
            }, 
            methods :{
                loadComments(){ // 从 localStorage 中加载评论列表
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    this.list = list
                }

            },
            components:{
                'cmt-box':commentBox
            }
        })

    </script>
</body>
</html>